<!--订单详情-->
<template>
    <div class="order-detail-root">
        <el-dialog
                title="订单详情"
                :visible.sync="dialogVisible"
                width="65%"
                :close="close"
                :before-close="close">
            <!--详情表单-->
            <el-form ref="form" :model="form" label-width="85px" class="form-class">
                <el-form-item label="订单编号：">
                    <span> {{form.orderCode}} </span>
                </el-form-item>
                <el-form-item label="创建时间：">
                    <span> {{form.createTime}} </span>
                </el-form-item>
                <el-form-item label="商家名称：">
                    <span> {{form.merchants}} </span>
                </el-form-item>
                <el-form-item label="订单总价：">
                    <span class="orderPrice">{{form.orderPrice}}</span> 元
                </el-form-item>
                <el-form-item label="折扣：">
                    <span> {{form.discount}} </span>
                </el-form-item>
                <el-form-item label="订单价格：">
                    <span>{{form.total}}</span> 元
                </el-form-item>
                <el-form-item label="商品信息：">
                    <div v-if="form.orderGoodsPoList && form.orderGoodsPoList.length > 0">
                        <el-card class="box-card" v-for="(item, i) in form.orderGoodsPoList" :key="i">
                            <div>
                                <div class="info-item">商品编号： <span>{{item.goodsCode}}</span></div>
                                <div class="info-item">商品名称： <span>{{item.goodsName}}</span></div>
                                <span class="info-item">数量：</span>
                                <div class="goods-count-in-order" v-for="(thing, index) in (item.orderGoodsVOList.filter(i_ => i_.count>0))" :key="index">
                                    <span> {{thing.count}} {{thing.unit}} ; </span> &nbsp;&nbsp;
                                    <span>({{thing.price}}元/{{thing.unit}})</span>
                                </div>
                                <div class="info-item">
                                    价格：<span>{{item.goodsTotal}}</span> 元
                                </div>
                            </div>
                        </el-card>
                    </div>
                    <div v-else>
                        暂无商品
                    </div>
                </el-form-item>
                <el-form-item label="备注：">
                    <el-input type="textarea" v-model="form.comment" readonly></el-input>
                </el-form-item>

            </el-form>

            <span slot="footer" class="dialog-footer">
                <el-button @click="close">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
import API from '@/api/api';
export default {
    name: "OrderDetail",
    props: ['order'],
    data() {
        return {
            //
            dialogVisible: true,
            //
            form: {
                orderCode: '',
                createTime: '',
                merchants: '',
                orderPrice: 0.00,
                total: 0.00,
                discount: 0.00,
                comment: '',
                orderGoodsPoList: [],
            },
        }
    },
    mounted() {
        console.log(this.order, '~@~@~@~@~@~#~@this.order');
        if (this.order) {
            this.orderDetail();
        }
    },
    methods: {
        //
        close() {
            this.$emit("close");
        },
        // 订单详情查询
        orderDetail() {
            let url = API.order.orderDetail;
            let param = {
                orderCode: this.order.orderCode
            };
            this.$get(url, param).then(res => {
                let data = res.data;
                if (data.success) {
                    this.form = data.data;
                    if (this.form.discount < 2) {
                        this.form.discount = "无折扣";
                    }
                } else {
                    this.$message.error({
                        showClose: true,
                        message: data.msg
                    })
                }
            }).catch(err => {
                this.$message.error("请求失败!");
            })
        },
    }
}
</script>

<style lang="scss" scoped>
    .box-card {
        margin:8px auto;
        .info-item {
        }
    }
    .goods-count-in-order {
        padding-left: 20px;
    }
    .orderPrice {
        color: #ee9e10;
        font-weight: bolder;
        font-size: 25px;
    }
    .form-class {
        padding-left: 10px;
    }

    /deep/.el-form-item{
        margin-bottom: 8px;
    }
</style>
